<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>电商大数据管理平台</title>
	<link rel="icon" href="icon.ico">
	<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="css/dashboard.css">
	<!--[if lt IE 9]>
			<script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
</head>

<body>
	<div id="app">
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					 aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
					<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
				</div>
				<navbars :acv="bnav"></navbars>
			</div>
		</nav>

		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3 col-md-2 sidebar">
					<fxnav fx="2"></fxnav>
				</div>
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					<h2 style="color: #0D81F5;"><b>培训分析</b></h2>

					<div class="row placeholders alert alert-info" style="padding-top: 10px;padding-bottom: 10px;">
						<h4><img src="images/sx.png" style="margin-left: -24px;margin-top: -3px;">各区县电商培训人数据汇总</h4>

						<!-- <button style="margin: 0 20px;" class="btn btn-primary pull-right" @click="getData()">确认</button> -->
						<form role="form" class="form-inline pull-right">
							<div class="form-group">
								<div class="form-group">
									<label for="year">年：</label>
									<select v-model="years" name="address" id="year" class="form-control">
										<option :value="yearss.years" v-for="yearss in ym">{{yearss.years}}年</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<div class="form-group">
									<label for="mouth">月：</label>
									<select v-model="days" name="address" id="mouth" class="form-control" @change="getData">
										<option :value="'0'+n"  v-for="n in yearSelect(years)" >{{n}}月</option>
									</select>
								</div>
							</div>
						</form>

					</div>
					<div style="text-align:center;">
						<h3 style="width: 90%;padding: 10px 0;">各区县电商培训人数据汇总</h3>
						<div style="width: 90%;padding: 10px 0;font-weight:bold;">
							<span>
								<span v-text="years"></span>年
								<span v-text="days"></span>月
								全市电商培训人数据总数:
							</span>
								<span id="total">0</span>
						</div>
						<div v-show="chart1show" id="chart1" style="width: 90%;height:580px;"></div>
						<div v-show="!(chart1show)" class="zanwu">暂无数据 </div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="plugins/jquery/jquery.min.js"></script>
	<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/nav.js"></script>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				bnav: {
					number: 2,
				},
				trainData: [],
				geoCodeList: [],
				trainPeoples: [],
				totalNum: 0,
				years: 2017,
				days: "01",
				chart1show: true,
				ym:[]
			},
			computed: {

			},
			mounted: function () {

				this.getData();
				this.yearMonth();
			},
			methods: {
				yearSelect: function (years) {
					var yms = this.ym.filter(function (element) {
						return element.years == years;
					})
					var yo = yms[0] || {};
					return yo.months;
				},
				yearMonth: function () {
					var dates = new Date();
					var year = dates.getFullYear();
					var month = dates.getMonth() + 1;
					var childs = [];
					if (year >= 2017) {
						for (var i = 0; i <= (year - 2017); i++) {
							if (i + 2017 < year) {
								childs.push({ years: 2017 + i, months: 12 })
							} else if (i + 2017 == year) {
								childs.push({ years: 2017 + i, months: month })
							}
						}
					}
					this.ym = childs;

				},
				getData: function (val) {
					this.geoCodeList = [];
					this.trainData = [];
					this.trainPeoples = [];
					this.totalNum = 0;
					var vm = this;
					$.ajax({
						type: "get",
						url: "ebb/front/train/info/total/?trainDate=" + vm.years + "-" + vm.days,
						async: true,
						success: function (data) {
							if (data.toString().length > 4) {
								vm.trainData = data;
								vm.makeAxisData1();
							} else {
								vm.chart1show = false;
							}

						},
						error: function (XMLHttpRequest, textStatus, errorThrown) {
							vm.chart1show = false;
							if (XMLHttpRequest.status == 401) {
								//跳转到登录页,带上登录后的跳转地址redirect_uri=???
								// redirect_login();

								ShowTip("请先登录！", "success", 1000);
								setTimeout(function () {
									window.location.href = "login.html"
								}, 1000);
							}
						}
					});
				},
				makeAxisData1: function () {

					var vm = this;
					for (var i = 0; i < vm.trainData.geoCodeList.length; i++) {
						vm.geoCodeList.push(vm.trainData.geoCodeList[i].geoName);
					}
					for (var i = 0; i < vm.trainData.trainPeoples.length; i++) {
						vm.trainPeoples.push({ value: vm.trainData.trainPeoples[i], name: vm.trainData.geoCodeList[i].geoName });
						vm.totalNum += parseInt(vm.trainData.trainPeoples[i]);
					}
					$("#total").html(vm.totalNum);
					vm.makeChart1();
				},
				makeChart1: function () {
					var chart1 = echarts.init(document.getElementById('chart1'));

					option = {
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b}: {c} ({d}%)"
						},
						color: ['#0765F0', '#FCA713', '#FC3913', '#0F9E01', '#FCA713'],
						legend: {
							orient: 'vertical',
							x: '40px',
							data: this.geoCodeList
						},
						series: [
							{
								name: '培训人数',
								type: 'pie',
								radius: '75%',
								center: ['50%', '50%'],
								data: this.trainPeoples,
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};

					chart1.setOption(option);
				}
			}
		});
	</script>
</body>

</html>